<template>
  <div class="list">
    <div class="top">
      <!-- <planSearch @search="search"></planSearch> -->
      <!-- <el-button type="primary"
                 size="mini"
                 style="background-color:#0268F4"
                 @click="openDialog">船期申报</el-button> -->
      <div class="left">
        <div :class="activeIndex==null?'active':''"
             @click="changeTab(null)">全部订单</div>
        <div :class="activeIndex=='W'?'active':''"
             @click="changeTab('W')">待审核</div>
        <div :class="activeIndex=='A'?'active':''"
             @click="changeTab('A')">已审核</div>
      </div>
      
      <div class="middle"
           @click="changeTab('N')">
        委托回收站
      </div>
      
      <div class="right">
        <!-- <el-button type="primary"
                     slot="reference"
                     @click="setCus"
                     style="background:#0F47B8;margin-right:10px">+ 办单箱公司</el-button> -->
        <el-input placeholder="船名或计划号搜索"
                  clearable
                  v-model="condition.keyword"
                  class="input-with-select">
          <el-button slot="append"
                     icon="el-icon-search"
                     @click="containerSelectAll"></el-button>
        </el-input>
      </div>
    </div>
    <div class="select">
      <el-dropdown @command="command('time',$event)">
        <span>
          {{text1}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="item"
                            v-for="item,index in list1"
                            :key="index">{{item.text}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown @command="command('status',$event)">
        <span>
          {{text2}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="item"
                            v-for="item in planstatus"
                            :key="item.key">{{item.value}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown @command="command('type',$event)">
        <span>
          {{text3}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item :command="item"
                            v-for="item in planTag"
                            :key="item.value">{{item.title}}</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <myTable :data="tableData"
             @del="del" :tips="termList"
             @delInfo="containerSelectAll" @carPlan="carPlan" @driverCertificate="driverCertificate"></myTable>
    <div class="page">
      <el-pagination background
                     :total="condition.total"
                     :page-size="condition.pageSize"
                     :page-sizes="[5, 10, 15, 20]"
                     :current-page="condition.page+1"
                     @current-change="currentChange"
                     @size-change="sizeChange"
                     layout="total,sizes,prev, pager, next,jumper">
      </el-pagination>
    </div>
    <el-dialog title=""
               width="830px"
               :visible.sync="dialogVisible">
      <addCarTeam v-if="dialogVisible" :plan-no="planNo" :cst-cstmcd="cstTrnscomCd" :type="carType"
      @close="dialogVisible=false" :see="see" :isContainer="true" :cntrNo="cntrNo"></addCarTeam>
    </el-dialog>
    <el-dialog title=""
               width="700px"
               :visible.sync="dialogVisible1">
      <cusList v-if="dialogVisible1" 
      @close="dialogVisible1=false" :data="cstCopercdList" :data1="customerList"></cusList>
    </el-dialog>
    <el-dialog title=""
               width="700px"
               :visible.sync="certificateShow">
      <driverCOut v-if="certificateShow" @close="certificateShow=false" :cargoList="cargoList" :cargoCodecargoCode="cargoCodecargoCode"></driverCOut>
    </el-dialog>
  </div>
</template>

<script>
import myTable from './myTable2.vue'
import addCarTeam from './moudel/addCarTeam.vue'
import cusList from './moudel/cusList.vue'
import driverCOut from './moudel/driverCOut.vue'
import moment from 'moment'
export default {
  name: 'boxGoods',
  components: { myTable,addCarTeam,cusList,driverCOut },
  data() {
    return {
      carType:'boxGoods',
      tableData: [],
      dialogVisible: false,
      dialogVisible1: false,
      condition: {
        keyword: '',
        selectDateType: 2, //1本月内委托、2近三个月、3半年内、4一年内
        page: 0,
        pageSize: 5,
        planstatus: '', //状态
        planTagExt: '', //类型
        total: 0,
      },
      id: '', //编辑
      colors: [
        '#1075FF',
        '#13D55C',
        '#FF9000',
        '#2970FF',
        '#F56C6C',
        '#043AA7',
        '#00BAFF',
        '#00BAFF',
        '#DDDDDD',
      ],
      planstatus: [
        { key: null, value: '全部状态' },
        { key: 'P', value: '初始' },
        { key: 'M', value: '待确认' },
        { key: 'W', value: '待审核' },
        { key: 'R', value: '审核不通过' },
        { key: 'A', value: '审核通过' },
        { key: 'S', value: '下发成功' },
        { key: 'F', value: '下发失败' },
        { key: 'Y', value: '已支付' },
        { key: 'N', value: '取消' },
      ],
      activeIndex: null,
      list1: [
        {
          text: '全部时间',
          value: null,
        },
        {
          text: '本月',
          value: 1,
        },
        {
          text: '近三个月',
          value: 2,
        },
        {
          text: '近半年',
          value: 3,
        },
        {
          text: '全年',
          value: 4,
        },
      ],
      planTag: [
        { title: '全部状态', value: null },
        {
          title: '提重返空',
          name: 'heavyEmpty',
          value: 'PFRE',
        },
        {
          title: '提空返重（不指定箱号）',
          name: 'emptyHeavyNoNum',
          value: 'PERF_NC',
        },
        {
          title: '提空返重（指定箱号）',
          name: 'emptyHeavyNum',
          value: 'PERF_WC',
        },
        {
          title: '进空',
          name: 'emptyBox',
          value: 'IE',
        },
        {
          title: '进重',
          name: 'heavyBox',
          value: 'IF',
        },
        {
          title: '提重',
          name: 'heayBoxNum',
          value: 'PF',
        },
        {
          title: '提空（不指定箱号）',
          name: 'emptyBoxNum',
          value: 'PE_NC',
        },
        {
          title: '提空（指定箱号）',
          name: 'emptyBoxNoNum',
          value: 'PE_WC',
        },
        {
          title: '拆箱',
          name: 'unpacking',
          value: 'UNBOX',
        },
        {
          title: '装箱（不指定箱号）',
          name: 'packingNoNum',
          value: 'BOX',
        },
        {
          title: '装箱（指定箱号）',
          name: 'packingNum',
          value: 'BOX_APPOINT',
        },
      ],
      statusList: [
        { name: '全部类型', value: null },
        {
          name: '待审核',
          value: 0,
        },
        {
          name: '审核通过',
          value: 1,
        },
        {
          name: '审核未通过',
          value: 2,
        },
        {
          name: '预报',
          value: 3,
        },
        {
          name: '下发失败',
          value: 4,
        },
        {
          name: '取消',
          value: 5,
        },
        {
          name: '确报',
          value: 6,
        },
        {
          name: '在港',
          value: 7,
        },
        {
          name: '离港',
          value: 8,
        },
      ],
      text1: '近三个月',
      text2: '全部状态',
      text3: '全部类型',
      cntrNo:[],
      cstCopercdList:[],
      customerList:[],
      cargoList:{},
      dataSave:{},
      certificateShow:false,
      termList:[],
    }
  },

  methods: {
    setCus(){
      this.customerByType()
      this.getCustomerRelations()
      this.dialogVisible1=true
    },
    carPlan(data,perCd){
      //v-if=""
      this.see = !(perCd===data.cstTrnscomCd && (('P'===data.pstatus||'W'===data.pstatus)  
      && !(['N'].includes(data.planstatus))))
      //console.log(data)
      //this.see = perCd!==data.cstTrnscomCd
      this.cntrNo = ['PERF_NC','PE_NC','BOX'].includes(data.planTagExt)
      console.log('iowqueoiuwq')
      console.log(data.planTagExt)
      console.log(['PERF_NC','PE_NC','BOX'].includes(data.planTagExt))
      this.planNo=data.planno
      this.cstTrnscomCd=data.cstTrnscomCd
      //this.cntrNo=data.planContainers
      console.log(data)
      this.dialogVisible=true
    },
    /**
     * @Descripttion: 生成二维码
     * @Author: 王文豪
     * @msg: 
     * @return {*}
     */    
     driverCertificate(data,type){
      console.log('pppppppppppppppppppppppppppp',data,type)
      if(type == '0'){/* 生成二维码 */
        let params = {
          planNo:data.planno
        }
        this.$api
          .insertBoxCarQRCode(params)
          .then((res) => {
            if (res.success) {
              // if(res.data.length){
              //   this.$api
              //     .generateCode(data.planno)
              //     .then((res) => {
              //       if (res.success) {
              //         console.log('----------',res)
                      this.$message.success('生成二维码成功！')
                      this.containerSelectAll()
                  //   }
                  // })
                  // .catch((err) => {
                  //   console.log(err);
                  // })
              // }else{
              //   this.$message.warning('暂无数据')
              // }
            }
          })
          .catch((err) => {
            console.log(err);
          })
      }else{/* 查看凭证 */
        let params = {
          planNo:data.planno
        }
        this.$api
          .getBoxCarQRCode(params)
          .then((res) => {
            if (res.success) {
              console.log('000000000000000000000',res);
              this.cargoList = res.data
              this.dataSave = JSON.parse(JSON.stringify(data))
              this.certificateShow = true
              // if(this.cargoList.length){
              //   this.getQcode(this.cargoList[0].cargoCode,false)
              // }else{
              //   this.$message.warning('未查询到货种数据')
              // }
            }
          })
          .catch((err) => {
            console.log(err);
          })
      }
    },
    /**
     * @Descripttion: 获取二维码
     * @Author: 王文豪
     * @msg: 
     * @param {*} cargoCode
     * @param {*} freshType
     * @return {*}
     */    
    getQcode(cargoCode,freshType){
      this.cargoCodecargoCode = cargoCode
        console.log('===========33333333333333',this.dataSave.planno)
        let params = {
          planNo:this.dataSave.planno,
          cargoCode:cargoCode
        }
        this.$api
          .viewCredentials(params)
          .then((res) => {
            if (res.success) {
              console.log('============',res)
              this.certificateInfo = this.dataSave
              this.certificateInfo.resData = res.data
              this.certificateShow = true
              if(freshType){
                this.sonPageFresh = false
                this.$nextTick(()=>{
                  this.sonPageFresh = true
                })
              }
            }
          })
          .catch((err) => {
            console.log(err);
          })
    },


    getCustomerRelations(){
      this.$api.getCustomerRelations({
        //termCode:''
      }).then(res=>{
        this.customerList = res.data
      }).catch()
    },
    customerByType(){
      //持箱人
      this.$api.customerByType({ tenantTypeName: '持箱人' }).then((res) => {
        this.cstCopercdList = res.data.data
        //console.log(this.cstCopercdList)
      }).catch((err) => {})
    },
    del(id) {
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示')
        .then(() => {
          this.$api.delSchedules({ id }).then((res) => {
            if (res.code == 200) {
              this.$message.success('删除成功')
              this.find()
            }
          })
        })
        .catch(() => {})
    },

    containerSelectAll() {
      this.$api.term().then(res => {
					this.termList = res.data.data
			})
      this.$api.containerSelectAll(this.condition).then((res) => {
        this.tableData = res.data.data
        this.condition.total = res.data.recordsTotal
      })
    },
    command(v, e) {
      console.log(v, e)
      if (v == 'time') {
        this.condition.selectDateType = e.value
        this.text1 = e.text
      } else if (v == 'status') {
        this.condition.planstatus = e.key
        this.text2 = e.value
      } else if (v == 'type') {
        this.condition.planTagExt = e.value
        this.text3 = e.title
      }
      this.containerSelectAll()
    },
    currentChange(e) {
      this.condition.page = e - 1
      this.containerSelectAll()
    },
    sizeChange(e) {
      this.condition.pageSize = e
      this.containerSelectAll()
    },
    changeTab(v) {
      this.activeIndex = v
      this.condition.planstatus = v
      this.containerSelectAll()
    },
  },

  computed: {},

  mounted() {
    // this.condition.etaMin = this.list1[1].value[0]
    // this.condition.etaMax = this.list1[1].value[1]
    //this.find()
    this.containerSelectAll()
  },
}
</script>
<style lang='scss' scoped>
.list {
  background-color: #fff;
  padding: 16px 14px;
  min-height: 800px;
  position: relative;
}
.page {
  text-align: right;
  margin-top: 20px;
}
.circle {
  display: flex;
  align-items: center;
  span:first-child {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
  }
}
.top {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  justify-content: space-between;
  font-size: 14px;
  font-family: PingFang SC-Regular-Regular, PingFang SC-Regular;
  font-weight: 400;
  color: #333333;
  .left {
    display: flex;

    div {
      margin-right: 10px;
      padding-bottom: 4px;
      cursor: pointer;
    }
  }
  .middle {
    cursor: pointer;
  }
}
.active {
  border-bottom: 2px solid #0f47b8;
  color: #0f47b8;
}
.right{
  display: flex;
}
.select {
  margin-top: 10px;
  height: 32px;
  background: #f5f5f5;
  border-radius: 0px 0px 0px 0px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.el-dropdown {
  margin-right: 200px;
  width: 150px;
  text-align: center;
}
:deep.el-dialog__header {
  padding: 0;
}
:deep.el-dialog__body {
  padding: 20px;
}
</style>